<template>
  <div class="body">
    <el-form :model="registry" class=" w-50 mt-5 mx-auto my-auto">
      <div class="login_box">
      <el-form-item style="margin-top: 15px">
        <div class="fs-2 mx-auto" style="margin-top: 5px">夕阳行动登录</div>
      </el-form-item>
      <el-form-item>
        <el-row class="mx-auto w-50">
          <el-col :span="24">
            <el-input
              v-model="login.username"
              placeholder="用户"
              type="text"
            ></el-input>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item>
        <el-row class="mx-auto w-50">
          <el-col :span="24">
            <el-input
              v-model="login.password"
              type="text"
              show-password
              placeholder="密码"
            ></el-input>
            <span class="ms-2">忘记密码？</span>
          </el-col>
        </el-row>
      </el-form-item>
         <!-- <div class="mx-10" style="font-size: 10px">
          <router-link to="">忘记密码</router-link>
        </div> -->
      <el-form-item>
         <div class="mx-auto">
        <el-button type="primary" @click="loginAction" class="mx-auto">登录</el-button>
         </div>
        <el-col style="margin-top:25px" class="mx-auto">
            <span class="thinkcss-left">没有账户，</span>
            <span id="blue" class="thinkcss-left">
              <router-link to="/regiStry">免费注册</router-link>
            </span>
          </el-col>
      </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import auth from '@/tools/auth.js'
export default {
    name:'LoginFrame',
    data() {
        return {
         login: {
            username: null,
            password: null,
        },
      };
    },
    mounted() {
      auth.logout();
    },
    methods:{
      loginAction(){
        if(this.login.password == this.login.password){
          this.$axios.post('/api/login',this.login).then(response =>{
              let data = response.data;
              if(data.code==200){
                //1.保存令牌
                let token = data.data;
                auth.saveToken(token);
                //2.跳转到个人空间首页
                this.$router.push('/person/info')
              }else{
                alert(data.msg);
              }
          })
        }else{
          alert('登录成功')
        }
      }
    }
}
  
</script>

<style scoped>
.body {
  width: 100%;
  height: 100%;
  position: fixed;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("@/assets/下载.png");
}

.login_box{
    width: 536px;
    height: 300px;
    /* background-color: #ffffff; */
    background: rgba(255,255,255,0.3);
    opacity: 0.85;
    filter: alpha(opacity=90);
    position: absolute;
    left: 50%;
    top:40%;
    transform: translate(-50%,-50%);
    
}
 span{
  font-size: 10px;
  color: #72a2f6;
  }

</style>